<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Franklin Capital Corporation</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <header>
                <h1><img src="images/Franklin-Capital-Corporation-logo.png" alt="Franklin Capital Corporation"  />Franklin Capital Corporation </h1>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#" class="first selected">Make a Payment</a></li>
                        <li><a href="#">Auto Pay Setup</a></li>
                        <li><a href="#">View History</a></li>
                        <li><a href="#">Manage Account</a></li>
                    </ul>
                </nav>
                <form id="search" method="post" action="">
                    <input type="text" value="Search" />
                    <span></span>
                    <button type="submit">Go</button>
                </form>
            </header>
            <div id="content" class="inner">
                <ul class="step_nev">
                    <li class="selected">Payment Method</li>
                    <li>Payment Info</li>
                    <li>Confirmation</li>
                </ul>
                <div id="column1">
                    <h3><strong>Payment</strong> Method</h3>
                    <p>The following payment methods are available for your account. Please select from the following.</p>
                    <ul>
                        <li>
                            <input type="radio" name="includedTransport" value="1" />
                            <label for="chechkingSaving">Checking / Savings</label>
                        </li>
                        <li>
                            <input type="radio" name="includedTransport" value="0" />
                            <label for="CreditCard">Credit Card</label>
                        </li>
                    </ul>
                </div>
            <div id="column2">
                <a class="next" href="#">next</a>
            </div>
            <div id="column3">
                <p><strong>Schedule</strong> Payments</p>                       
                <ul>
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                    <li class="items">
                        <ul>
                            <li>21/11/11</li>
                            <li>Description</li>
                            <li><img src="images/cancel-icon.png" alt="Cancel Icon" /></li>
                            <li class="last">Cancel</li>
                        </ul>
                    </li>                                    
                </ul>       
            </div>
        </div>
        <footer>
            <ul>
                <li class="needHelp"> Need help? </li>
                <li class="customerServiceOnline"> 
                    <a href="#" title="Click to contact Customer Services Online">Click</a>
                    <strong>Customer Service Online</strong> 
                </li>
                <li class="call">
                    <p>Call <a href="tel:1-800-125-9568">1-800-FCC-1 (1-800-125-9568)</a></p>
                </li>
                <li class="visit">
                    <p>Visit a <strong>FCC Branch</strong></p>
                </li>
            </ul>
            <div id="copyright">
                <hr />
                Copyright © 2011. Franklin Capital Corporation. All rights reserved. <a href="">Terms of Use</a> | <a href="">Privacy Policy</a> 
            </div>
        </footer>
    </div>
    <script type="text/javascript">
        $(function(){
            $("input[type='radio']").each(function(){
                var thisCheckbox = $(this);
                var newCheckbox = $('<span class="form_check"></span>');
                if(thisCheckbox.is(':checked')){
                    newCheckbox.addClass('checked');
                }

                newCheckbox.click(function(){
                    thisCheckbox.click();
                    $("span.form_check[name='"+thisCheckbox.attr('name')+"']").removeClass('checked');
                    $(this).addClass('checked');
                });

                thisCheckbox.change(function(){
                    newCheckbox.click();
                });

                newCheckbox.attr('name', thisCheckbox.attr('name'));
                thisCheckbox.hide(0).after(newCheckbox);
            });



            $('select').each(function(){
                var slideSpeed = 100;
                var thisDropdown = $(this);
                var thisSelectedText = $('option:selected', thisDropdown).text();

                var newDropdownContainer = $('<div class="dropdown"><ul></ul></div>');
                var newDropdownHeader = $('<div class="header">' +
                    '<strong>' + thisSelectedText + '</strong>' +
                    '<em></em>' +
                    '</div>');

                thisDropdown.hide(0).after(newDropdownContainer);
                newDropdownContainer.prepend(newDropdownHeader);

                thisDropdown.find('option').each(function(){
                    var thisOption = $(this);
                    var thisOptionText = thisOption.text();
                    var thisOptionValue = thisOption.val();

                    var newOption = $('<li value="' + thisOptionValue + '">' + thisOptionText + '</li>');

                    newOption.click(function(){
                        var thisVal = $(this).attr('value');
                        var thisText = $(this).text();
                        thisDropdown.val(thisVal).change();
                        newDropdownHeader.find('strong').text(thisText);
                        newDropdownContainer.find('ul').slideUp(slideSpeed)
                    });

                    newDropdownContainer.find('ul').append(newOption);
                });

                newDropdownHeader.click(function(){
                    var alreadyVisible = (newDropdownContainer.hasClass('top')) ? true : false;
                    $('div.dropdown').removeClass('top').find('ul').slideUp(slideSpeed);

                    if(!alreadyVisible){
                        newDropdownContainer.addClass('top').find('ul').slideDown(slideSpeed);
                    }
                });

                newDropdownContainer.find('ul li:last').addClass('last');

            });
        });
    </script>
    <script>
    $(function(){
        $("#column3 ul .items:even").css("background-color", "#efefef");
    });
    </script>

</body>
</html>